<template>
  <div class="page-table avue-crud">
    <el-table :border="option.border"
              :height="height"
              :size="option.size"
              :row-class-name="rowClassName"
              v-loading="loading"
              :data="data"
              @row-dblclick="onRowDbClick"
    >
      <el-table-column type="index" v-if="option.index" :width="option.indexWidth||'auto'"
                       :fixed="option.indexFixed"
      ></el-table-column>
      <template v-for="column in option.column">
        <el-table-column :label="column.label" v-if="column.children && column.children.length" :key="column.prop"
                         :header-align="column.headerAlign||option.headerAlign||'center'">
          <template v-for="item in column.children">
            <el-table-column :label="item.label" :prop="item.prop" :key="item.prop"
                             :fixed="item.fixed"
                             :align="item.align || 'center'"
                             :header-align="item.headerAlign||option.headerAlign||'center'"
                             :width="item.width||'auto'"
                             :min-width="item.minWidth"
                             :filters="item.filters"
                             :filter-multiple="item.filterMultiple"
                             :filter-method="item.filterMethod"
                             :formatter="item.formatter"
            >
              <template slot-scope="scope">
                <slot :name="item.prop" v-bind="{row:scope.row, index: scope.$index, size: option.size}" v-if="item.slot">
                </slot>
                <template v-else>
                  <span v-html="handleDetail(scope.row, item)"></span>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
        <el-table-column v-else :label="column.label" :prop="column.prop" :key="column.prop"
                         :fixed="column.fixed"
                         :align="column.align || 'center'"
                         :header-align="column.headerAlign||option.headerAlign||'center'"
                         :width="column.width||'auto'"
                         :min-width="column.minWidth"
                         :filters="column.filters"
                         :filter-multiple="column.filterMultiple"
                         :filter-method="column.filterMethod"
                         :formatter="column.formatter"
        >
          <template slot-scope="scope">
            <slot :name="column.prop" v-bind="{row:scope.row, index: scope.$index, size: option.size}" v-if="column.slot">
            </slot>
            <template v-else>
              <span v-html="handleDetail(scope.row, column)"></span>
            </template>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" :width="option.menuWidth||'100px'" align="center" v-if="validData(option.menu, true)">
        <template slot-scope="scope">
          <slot name="menu" v-bind="scope">
            <el-button type="text" :size="option.size" @click="handleView(scope.row)"> 查 看 </el-button>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="avue-crud__pagination"  v-if="pageAble">
      <el-pagination
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page.currentPage"
                     :page-sizes="pageSizes"
                     :page-size="page.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'page-table',
  props: {
    loading: Boolean,
    height: [String, Number],
    data: {
      type: Array,
      default: () => {
        return [
        ]
      }
    },
    pageAble: {
      type: Boolean,
      default: true
    },
    page: {
      type: Object,
      default: () => {
        return {
          currentPage: 1,
          total: 0,
          pageSize: 10
        }
      }
    },
    rowClassName: Function,
    option: {
      type: Object,
      default: () => {
        return {
          size: 'small',
          border: true,
          column: []
        }
      }
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
    }
  },
  methods: {
    validData (value, defaultVal) {
      if (typeof (value) === 'undefined') {
        return defaultVal
      }
      return value
    },
    handleDetail (row, column) {
      let result = row[column.prop]
      if (column.formatter) {
        result = column.formatter({ row: row, column: column })
      }
      return result
    },
    handleView (row) {
      this.$emit('on-view', row)
    },
    handleCurrentChange (pageNo) {
      this.$emit('current-change', pageNo)
    },
    handleSizeChange (pageSize) {
      this.$emit('size-change', pageSize)
    },
    onRowDbClick (row, index) {
      this.$emit('row-dblclick', row, index)
    }
  }
}
</script>

<style scoped>

</style>
